<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 1.筛选和新增 -->
        <el-row>
          <el-col :span="15">
            <!-- form表单 -->
            <el-form :inline="true" :model="name" class="demo-form-inline" size="mini">
              <el-form-item label="学科名称">
                <el-input v-model="name.DisciplineName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size='mini' @click="delName">清除</el-button>
                <el-button size='mini' type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 新增学科 -->
          <el-col :span="9">
            <el-button size="mini" style="float:right" type="success" icon="el-icon-edit" @click="onAdd">新增学科</el-button>
          </el-col>
        </el-row>
        <!-- 2.数据总数-->
        <el-row style="margin-bottom:20px">
          <el-col :span="24">
            <el-alert :title="'数据一共'+counts+'条'" type="info" :closable='false' show-icon>
            </el-alert>
          </el-col>
        </el-row>
        <!-- 3.数据列表 -->
        <el-row>
          <el-col :span="24">
            <el-table :data="list" style="width: 100%" :key="val">
              <el-table-column type="index" label="顺序">
              </el-table-column>
              <el-table-column prop="subjectName" label="学科名称">
              </el-table-column>
              <el-table-column prop="username" label="创建者">
              </el-table-column>
              <el-table-column #default='obj' prop="addDate" label="创建日期">
                {{add(obj.row.addDate)}}
              </el-table-column>
              <el-table-column prop="isFrontDisplay" label="前台是否显示">
              </el-table-column>
              <el-table-column prop="twoLevelDirectory" label="二级目录">
              </el-table-column>
              <el-table-column prop="tags" label="标签">
              </el-table-column>
              <el-table-column prop="totals" label="题目数量">
              </el-table-column>
              <el-table-column #default='{row}' prop="totals" label="操作" width="250px" class="operations">
                <a @click="onClassification(row)">学科分类</a>
                <a @click="onLabel(row)">学科标签</a>
                <a @click="onModify(row)">修改</a>
                <a @click="onDel(row)">删除</a>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
        <!-- 4.分页 -->
        <el-row type="flex" justify='end'>
          <el-col :span="12">
            <el-pagination background layout=" prev, pager, next,sizes,jumper" @size-change="handleSizeChange" :page-size="5" @current-change="handleCurrentChange" :current-page='page.page' :page-sizes="[5, 10, 20, 30]" :total="counts" :key="vals" v-if="counts!= 0">
            </el-pagination>
          </el-col>

        </el-row>
      </el-card>
    </div>
    <!-- dialogTableVisible用来传输子组件的显示隐藏   subjectname是回显数据   gai是将回显重置 -->
    <Subjects :dialogTableVisible.sync='dialogTableVisible' :subjectName.sync='value' @gai='Reset'></Subjects>
  </div>
</template>

<script>
import { detail, remove } from '@/api/hmmm/subjects.js'// 引入api
import { parseTime } from '@/utils/index.js'// 转换时间
import Subjects from '../components/subjects-add.vue' // 弹框

export default {
  data () {
    return {
      val: 100, // 使用key刷新重新渲染组件
      vals: 10000, // 刷新分页
      // 点击编辑状态传过去的本项的数据
      value: {
        name: '', // 回显弹框中的username
        Bool: false, // 回显弹框中的radio
        state: 1, // 判断是添加状态还是修改状态
        id: '' // 修改项的id
      },
      dialogTableVisible: false, // 控制子组件弹框显示隐藏
      list: [], // 渲染数据
      counts: 0, // 列表总数量

      // 检索绑定数据
      name: {
        DisciplineName: ''
      },

      // 列表请求页面设定
      page: {
        id: '',
        page: 1,
        pagesize: 5,
        subjectName: ''
      }
    }
  },
  watch: {
    // // 解决在添加新学科时，分页尾部出现bug问题
    // counts (newVal) {
    //   this.vals = newVal
    // }
  },
  components: {
    Subjects // 弹框组件
  },
  created () {
    this.getDetail()
    // setTimeout(() => {
    //   // ajax
    //   const res = {
    //     name: 'abc',
    //     list: ['潜江', '滨海', '北京'],
    //     province: '北京'
    //   }

    //   this.list = res.list
    //   this.form.name = res.name
    //   this.form = { name: res.name }
    //   // this.$set(this.form, 'province', res.province)
    //   this.form.province = res.province
    // })
  },
  methods: {

    // 修改弹框关闭时重置value数据
    Reset (obj) {
      this.value = obj
    },
    // 新增学科
    onAdd () {
      this.dialogTableVisible = true
      this.value.state = 1 // 判断这个弹层是修改作用还是新增作用
    },
    // 请求列表数据
    async getDetail () {
      const aa = await detail(this.page)
      // console.log('刷新页面', aa)

      this.list = await aa.data.items // 数据
      this.counts = await aa.data.counts // 总数
      console.log('添加后的总是是', this.counts)
      this.val++
    },
    // 时间过滤器
    add (data) {
      return parseTime(data, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    // 每页最大页数改变时触发
    handleSizeChange (data) {
      this.page.pagesize = data
      this.getDetail()
    },
    // 当页数发生变化时触发
    handleCurrentChange (data) {
      this.page.page = data
      this.getDetail()
    },
    // 筛选搜索按钮
    search () {
      if (!this.name.DisciplineName) return
      this.page.subjectName = this.name.DisciplineName
      this.getDetail()
    },
    // 筛选清除按钮
    delName () {
      this.name.DisciplineName = ''
    },
    // 学科分类按钮
    onClassification (obj) {
      this.$router.push({ path: '/subjects/directorys', query: { id: obj.id, name: obj.subjectName } })
      console.log(this.$route)
    },
    // 学校标签按钮
    onLabel (obj) {
      this.$router.push({ path: '/subjects/tags', query: { id: obj.id, name: obj.subjectName } })
    },
    // 修改按钮
    onModify (obj) {
      this.value.state = 2
      this.value.id = obj.id
      // 回显
      const aa = { 0: false, 1: true }
      this.value.name = obj.subjectName
      this.value.Bool = aa[obj.isFrontDisplay]
      // 点击修改后打开弹框
      this.dialogTableVisible = true
    },
    // 删除
    async onDel (obj) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (this.list.length === 1) {
          this.$message.success('这是本页最后一个数据啦')
          this.page.page = this.page.page - 1
        }
        await remove({ id: obj.id }) // 调用删除api
        await this.getDetail() // 刷新页面数据
        this.vals++
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  margin: 0 import;
  padding: 0;
}
.cell a {
  color: #409eff;
  margin-right: 10px;
}
</style>
